<script setup lang="ts" name="Moving">
const value: any = ref('')

const emits = defineEmits(['change'])

const props = defineProps({
  position: { type: String, default: '' }
})

onMounted(() => {
  document.addEventListener('mouseup', mouseUp)
})

onBeforeUnmount(() => {
  document.removeEventListener('mouseup', mouseUp)
})
const mouseDown = (e) => {
  document.addEventListener('mousemove', mouseMove)
  if (props.position === 'left' || props.position === 'right') {
    value.value = e.screenX
  } else {
    value.value = e.screenY
  }
}
const mouseMove = (e) => {
  if (props.position === 'left' || props.position === 'right') {
    emits('change', value.value - e.screenX)
    value.value = e.screenX
  } else {
    emits('change', value.value - e.screenY)
    value.value = e.screenY
  }
}

const mouseUp = () => {
  value.value = ''
}
</script>

<template>
  <div :class="['moving', props.position]" @mousedown="mouseDown">
    <slot />
  </div>
</template>

<style scoped lang="scss">
.moving{
  position: absolute;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;

  &.left, &.right{
    top: 0;
    width: 5px;
    height: 100%;
    cursor: w-resize;
  }

  &.left{
    left: 0;
  }

  &.right {
    right: 0;
  }

  &.top, &.bottom{
    left: 0;
    width: 100%;
    height: 5px;
    cursor: s-resize;
  }

  &.top{
    top: 0;
  }

  &.bottom{
    bottom: 0;
  }
}
</style>
